import { View, Text, ScrollView } from '@tarojs/components'
import { useLoad } from '@tarojs/taro'
import { useState } from 'react'
import Todo from '../../components/Todo'
import './index.scss'

export default function Discover () {
  const [current, setCurrent] = useState(0)
  const tabList = [{ title: '推荐' }, { title: '热门' }, { title: '关注' }, { title: '附近' }]
  
  useLoad(() => {
    console.log('Discover page loaded.')
  })

  const handleClick = (index) => {
    setCurrent(index)
  }

  const renderTabContent = () => {
    switch(current) {
      case 0:
        return (
          <View className='tab-content'>
            <Todo />
          </View>
        )
      case 1:
        return <View className='tab-content'>热门内容</View>
      case 2:
        return <View className='tab-content'>关注内容</View>
      case 3:
        return <View className='tab-content'>附近内容</View>
      default:
        return <View className='tab-content'>推荐内容</View>
    }
  }

  return (
    <View className='discover'>
      <View className='tabs-wrapper'>
        <ScrollView scrollX className='tabs-scroll'>
          <View className='tabs'>
            {tabList.map((tab, index) => (
              <View 
                key={index}
                className={`tab-item ${current === index ? 'tab-item-active' : ''}`}
                onClick={() => handleClick(index)}
              >
                {tab.title}
                {current === index && <View className='tab-item-underline'></View>}
              </View>
            ))}
          </View>
        </ScrollView>
      </View>
      <View className='tab-content-wrapper'>
        {renderTabContent()}
      </View>
    </View>
  )
}